<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tetris</title>
        <script src="libs/jquery-1.7.1.js"></script>
       
        <script src="models/SharedObject.js"></script>
        <script src="graphics/BaseGraphic.js"></script>
        <script src="graphics/SquareUnit.js"></script>
        <script src="components/GamePad.js"></script>
        
        <script src="models/UnitMap.js"></script>
        <script src="models/Coordination.js"></script>
        <script src="models/Game.js"></script>
        <script src="models/shape/Shape.js"></script>
        <script src="models/shape/Square.js"></script>
        <script src="models/shape/Strip.js"></script>
        <script src="models/shape/LShape.js"></script>
        <script src="models/shape/AntiLShape.js"></script>
        <script src="models/shape/ZShape.js"></script>
        <script src="models/shape/AntiZShape.js"></script>
        <script src="models/shape/TShape.js"></script>
              
        <script>
        	$(document).ready(function(){       		
        		initGamePad();
        		$("#startBtn").click(function()
        		{     			
        			$(document).unbind("keydown",keyDownHandler);
					gamePad.cleanPad();
					map.createMap();
					$("#score").text(0);
					$("#level").text(1);
        			
        			
					game = new Game();
					game.level = $("#modeSelector").attr("value");
					speed = 550 - 50*(game.level);			
					$("#startBtn").attr("disabled",true);
					$(document).bind("keydown",keyDownHandler);					
					newShape();
        		});
        	});
        </script>
    </head>
    <body>
    	<script>
    		var activeShape;
    		var gamePad;
    		var game;
    		var map;
    		var columns = 12;
			var rows = 20;
			var gap = 2;
			var canvasHeight;
			var canvasWidth;
			var speed;
			var timer;
    		function initGamePad()
    		{
    			var canvas = document.getElementById("myCanvas");
    			var context = canvas.getContext("2d");
    			SharedObject.context = context;  			
    			var pageHeight = $(window).height();			
				var infoH = $("#infoDiv").height();
				canvasHeight = pageHeight - infoH - 30;
				canvasWidth = columns*canvasHeight/rows;	
				$("#myCanvas").attr("width",canvasWidth);
				$("#myCanvas").attr("height",canvasHeight);
							
				var unitWidth = (canvasWidth - (columns + 1)*gap)/columns;
				map = new UnitMap(rows,columns);
				map.createMap();
				gamePad = new GamePad(map,unitWidth,gap,"#CCCCCC");
				gamePad.cleanPad();
    		}
    		
    		function newShape()
    		{
    			var number = 7;
    			var random = Math.round(Math.random()*(number-1));
    			switch(random)
    			{
    				case 0:
    					activeShape = new Square(map);
    					break;
    				case 1:
    					activeShape = new Strip(map);
    					break;
    				case 2:
    					activeShape = new LShape(map);
    					break;
    				case 3:
    					activeShape = new AntiLShape(map);
    					break;
    				case 4:
    					activeShape = new ZShape(map);
    					break;
    				case 5:
    					activeShape = new AntiZShape(map);
    					break;
    				case 6:
    					activeShape = new TShape(map);
    					break;
    			}	
    			activeShape.init();
    			clearTimeout(timer);
    			gamePad.draw(activeShape);
    			timer = setTimeout(autoDown,speed);
    		}
    		function updateStatus()
    		{
			    var cleanLineCount = gamePad.cleanRow();
				if(cleanLineCount == -1)
				{
					playSound("gameover");
					clearTimeout(timer);
					$("#startBtn").attr("disabled",false);
				}
				else 
				{
					if(cleanLineCount > 0)
					{
						playSound("clean");
						game.score += cleanLineCount;
						$("#score").text(game.score);
						if(game.score > game.level * 50)
						{
							levelUp();
						}
					}
					newShape();
				}
    		}
    		
    		function levelUp()
    		{
    			game.level++;
    			$("#level").text(game.level);
    			speed = 550 - 50*(game.level);
    		}
    		function autoDown()
    		{
    			var result = activeShape.down();
    			if(result)
    			{
    				gamePad.draw(activeShape);
    				timer = setTimeout(autoDown,speed);				
    			}
    			else
    			{
    				playSound("land");
					updateStatus();
    			}
    			
    		}
    		
    		function onDownClick()
    		{
				var result = activeShape.down();
    			if(result)
    			{
    				gamePad.draw(activeShape);
    			}
    			else
    			{
    				playSound("land");
					updateStatus();
    			}
    		}
    		function onSpaceBarClick()
    		{
    			var result = activeShape.quickDrop();
    			if(!result)
    			{
    				gamePad.draw(activeShape);
    				playSound("land");
    				updateStatus();
    			}
    		}
    		
    		function onLeftClick()
    		{
    			var result = activeShape.left();
    			if(result)
    			{
    				gamePad.draw(activeShape);
    			}
    			
    		}
    		function onRightClick()
    		{
    			var result = activeShape.right();
    			if(result)
    			{
    				gamePad.draw(activeShape);
    			}			
    		}
    		function onUpClick()
    		{
    			var result = activeShape.transform();
    			if(result)
    			{
    				playSound("transform");
    				gamePad.draw(activeShape);
    			}
    		}
    		
    		function keyDownHandler()
    		{
    			if(event.keyCode == "37")
    			{
    				//left;
    				onLeftClick();
    			}
    			else if(event.keyCode == "39")
    			{
    				//right;
    				onRightClick();
    			}
    			else if(event.keyCode == "40")
    			{
    				//down;
    				onDownClick();        				
    			}
    			else if(event.keyCode == "38")
    			{
    				//up
    				onUpClick();
    			}
    			else if(event.keyCode == "32")
    			{
    				//space bar
    				onSpaceBarClick();
    			}
    		}
    		var sound;
    		function playSound(effectType)
    		{
    			if(sound == null)
    			{
    				sound = new Audio();
    			}
    			var url;
    			switch(effectType)
    			{
    				case "transform":
    					url = "assets/sounds/effect1.mp3";
    					break;
    				case "land":
    					url = "assets/sounds/effect2.mp3";
    					break;
    				case "clean":
    					url = "assets/sounds/effect3.mp3";
    					break;
    				case "gameover":
    					url = "assets/sounds/gameover.mp3";
    					break;
    			}   			
    			sound.setAttribute("src",url);
    			sound.play();
    		}
    	</script>
    	<div style="width:100%;height:100%">
    		<div style="width: 100%;height: 100%" >
    			<canvas id="myCanvas" width="100px" height="100px"></canvas>
    		</div>
    		<div id="infoDiv">
    			<div style="width: 100%;float:left">
    				<label>Level: </label>
    				<select id="modeSelector">
					  <option value ="1" selected="true">Easy</option>
					  <option value ="5">Normal</option>
					  <option value="10">Hard</option>
					</select>
    			</div>
    			<div style="width: 100%;float:left">
    				<label>Score: </label>
    				<label id="score">0</label>   
    			</div>
    			<div style="width: 100%;float:left">
    				<label>Level: </label>
    				<label id="level">1</label>   
    			</div>
    			<button id="startBtn">Start</button>		 			
    		</div>
    	</div>
    </body>
</html>
